<template>
  <div class="home-wrapper">
    <div class="list_box">
      <el-card class="right_yz" shadow="always" :body-style="{ padding: '0px' }">
        <div class="list_item">
          <div class="yz_box">
            <div class="yz_item">
              <div class="yz_img">
                <img src="../../assets/img/node0.png" alt="" />
              </div>
              <div class="yz_txt">
                <p class="yz_title">风力(级)</p>
                <p class="yz_desc">1</p>
              </div>
              <i class="el-icon-search"></i>
            </div>
            <div class="yz_item">
              <div class="yz_img">
                <img src="../../assets/img/node0.png" alt="" />
              </div>
              <div class="yz_txt">
                <p class="yz_title">风速(m/s)</p>
                <p class="yz_desc">0.3</p>
              </div>
              <i class="el-icon-search"></i>
            </div>
            <div class="yz_item">
              <div class="yz_img">
                <img src="../../assets/img/node0.png" alt="" />
              </div>
              <div class="yz_txt">
                <p class="yz_title">风向(方向)</p>
                <p class="yz_desc">北风</p>
              </div>
              <i class="el-icon-search"></i>
            </div>
            <div class="yz_item">
              <div class="yz_img">
                <img src="../../assets/img/node0.png" alt="" />
              </div>
              <div class="yz_txt">
                <p class="yz_title">土壤温度(℃)</p>
                <p class="yz_desc">27.2</p>
              </div>
              <i class="el-icon-search"></i>
            </div>
            <div class="yz_item">
              <div class="yz_img">
                <img src="../../assets/img/node0.png" alt="" />
              </div>
              <div class="yz_txt">
                <p class="yz_title">土壤水分(%)</p>
                <p class="yz_desc">13.1</p>
              </div>
              <i class="el-icon-search"></i>
            </div>
            <div class="yz_item">
              <div class="yz_img">
                <img src="../../assets/img/node0.png" alt="" />
              </div>
              <div class="yz_txt">
                <p class="yz_title">土壤EC(us/cm)</p>
                <p class="yz_desc">265.0</p>
              </div>
              <i class="el-icon-search"></i>
            </div>
            <div class="yz_item">
              <div class="yz_img">
                <img src="../../assets/img/node0.png" alt="" />
              </div>
              <div class="yz_txt">
                <p class="yz_title">温度(℃)</p>
                <p class="yz_desc">23.0</p>
              </div>
              <i class="el-icon-search"></i>
            </div>
            <div class="yz_item">
              <div class="yz_img">
                <img src="../../assets/img/node0.png" alt="" />
              </div>
              <div class="yz_txt">
                <p class="yz_title">湿度(%)</p>
                <p class="yz_desc">27.4</p>
              </div>
              <i class="el-icon-search"></i>
            </div>
            <div class="yz_item">
              <div class="yz_img">
                <img src="../../assets/img/node0.png" alt="" />
              </div>
              <div class="yz_txt">
                <p class="yz_title">噪声(dB)</p>
                <p class="yz_desc">66.3</p>
              </div>
              <i class="el-icon-search"></i>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <el-card class="right_sb" shadow="always" :body-style="{ padding: '0px' }">
      <div class="list_item">
        <div class="title">设备列表</div>
        <div class="scroll_box">
          <EleTree v-if="isTree" :treeData="treeData" v-on:listenToChildEvent="changeList" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import EleTree from "@/components/tree/EleTree.vue";
import Map from "@/components/map/proMap.vue";
export default {
  name: "Home",
  components: { EleTree, Map },
  data() {
    return {
      input: "",
      isTree:false,
      treeData:[],
      choseId:'',
      userInfo:{},
    };
  },
  mounted(){
    this.treeData = JSON.parse(localStorage.getItem('treeData'));
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
    this.isTree = true;
    this.choseId = this.treeData[0].children[0].label;
    this.getRealDataByAddress();
  },
  methods: {
    //获取实时数据
    getRealDataByAddress(){
      this.axios
        .request({
          method: "POST",
          url: "http://47.104.26.124:8080/zhny/data/getRealDataByAddress",
          params: {
            userId: this.userInfo.id,
            address:this.choseId
          },
        })
        .then((res) => {
          console.log(res);
          
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //监听树状图点击事件，切换数据源
    changeList(res) {
      this.choseId = res.label;
      this.getRealDataByAddress();
    },
  },
};
</script>

<style scoped lang="less">
@import "../../assets/less/home";
.home-wrapper {
  position: relative;
  .list_box {
    margin-top: 20px;
    width: calc(100% - 250px) !important;
    height: calc(100% - 50px);
    float: left;
    padding: 0;
    .yz_box{
      padding: 0px 5px;
      margin-top: 5px;
      height: 100%;
    }
    .right_yz{
      width: 270px;
      float: right;
    }
    /deep/.el-card__body{
      height: 100%;
    }
    .list_item{
      height: 100%;
    }
    .yz_item{
      width: calc(100% - 10px) !important;
    }
   
  }
  .right_sb{
    position: absolute;
    right: 0;
    top: 20px;
    width: 240px;
    height: calc(100% - 50px);
    /deep/.el-card__body{
      height: 100%;
    }
    .list_item{
      height: 100%;
    }
    .scroll_box{
      height: calc(100% - 30px);
    }
  }
  .el-input {
    width: 200px;
    margin: 10px 10px;
  }
}
</style>
